<template>
  <el-form ref="form" :model="form" @submit.native.prevent>
    <el-row>
      <el-form-item label="">
        <el-input
          v-model="form.propertyInfo"
          :min-height="200"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 24 }"
          :style="{ width: '100%' }"
          :disabled="isEdit"
        />
      </el-form-item>
    </el-row>
    <el-button size="mini" @click="shouqi">编辑</el-button>
    <el-button size="mini" @click="submitForm">提交</el-button>
  </el-form>
</template>
<script>
import {
  listSysMenuProperty,
  getSysMenuProperty,
  delSysMenuProperty,
  addSysMenuProperty,
  updateSysMenuProperty,
} from "@/api/conf/SysMenuProperty";
export default {
  props: {
    popoverInput: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isEdit: true,
      form: {},
      propertyInfo: "",
    };
  },
  watch: {
    popoverInput: {
      handler: function (newnew, oldold) {
        listSysMenuProperty(newnew).then((response) => {
          this.form = response.rows[0] ? response.rows[0] : {};
          this.form.propertyInfo = response.rows[0]
            ? response.rows[0].propertyInfo
            : "未定义";
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      if (this.isEdit == true) {
        return;
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.menuPropertyId != null) {
            updateSysMenuProperty(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.isEdit = true;
            });
          } else {
            let obj = {
              ...this.popoverInput,
              propertyInfo: this.form.propertyInfo,
            };
            addSysMenuProperty(obj).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.isEdit = true;
            });
          }
        }
      });
    },
    shouqi() {
      this.isEdit = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow-x: hidden;
}

span.textname {
  // display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 300px;
  resize: none;
  cursor: pointer;
}
</style>
    